<body class="login">
<div class="bg_frame">
    <div class="logo"></div>
    <div class="center_logo"></div>
    <h1>智能门禁管理平台v1.0</h1>
    <div class="line1"></div>
    <h2>欢迎使用</h2>
    <div class="login_form">
        <form ng-submit="login()">
            <div class="div-bor">
                <i class="user"></i>
                <input type="text" ng-model="user.account" name="account" placeholder="用户账号输入" class="password"
                       autocomplete="off"
                       required>
            </div>
            <br>
            <div class="div-bor">
                <i class="icon-pw"></i>
                <input type="text" onfocus="this.type='password'" ng-model="user.password" name="password"
                       placeholder="密码输入" class="password" autocomplete="off"
                       required>
            </div>
            <br>
            <div class="div-bor">
                <input type="text" ng-model="user.verifiCode" name="account" placeholder="验证码输入" class="verifi_code"
                       autocomplete="off"
                       required maxlength="4" minlength="4">
                <img  id="image" ng-click="getVerifiCode()">
            </div>
            <br/>
            <!-- ng-click="login()" -->
            <!-- <input type="submit" value="登录" class="login_button" ui-href="main.sys.user.list"> -->
            <button class="login_button" type="submit">登录</button>
        </form>

        <div class="handleBox">
            <p class="warn"><span>{{msg}}</span></p>
            <a href="#" ui-sref="access.forgetPassword" class=" bluecolor marginR">
                忘记密码?
            </a>
            <span class="bluecolor marginR" ng-click="openDowload()">APP下载</span>
            <a href="/udacs/static/udacs-d.zip" class="bluecolor marginR">
                请先下载安装驱动
            </a>

        </div>

    </div>
    <!--二维码-->
    <div class="code" ng-show="dowloadClick">
        <p class="dowloadcenter">下载中心<span class="glyphicon  glyphicon-remove closeBtn" ng-click="closeCode()"></span>
        </p>
        <div class="appcode clearfix">
            <div class="left">
                <p ng-click="changeAndroid()" data-img="res/img/androidAPPCode.png"><span class="android-icon"></span>android</p>
                <p ng-click="changeIos()" data-img="res/img/IosAPPCode.png"><span class="ios-icon"></span>iphone</p>
            </div>
            <div class="codeImg">
                <img id="qrCode" src="res/img/androidAPPCode.png" alt="">
                <p class="saoma">扫码下载<span>({{codeName}})</span></p>
            </div>
        </div>
        <button class="closeBtn back" ng-click="closeCode()">返回</button>
    </div>
</div>
</body>
<!--本页使用-->
<style scoped>
    input:focus{
        border-color: #00BDEF!important;
    }
    .android-icon, .ios-icon {
        display: inline-block;
        width: 22px;
        height: 26px;
        vertical-align: middle;
        margin-right: 6px;
        background-size: cover;
    }

    .android-icon {
        background-image: url("res/img/android-icon.png")
    }

    .ios-icon {
        background-image: url("res/img/ios-icon.png")
    }

    .glyphicon-remove {
        border-radius: 50%;
        padding: 4px;
        background-color: #e1e4e7;
    }

    .glyphicon-remove:hover {
        background-color: #d5dbdb
    }

    .back {
        border-radius: 4px;
        background-color: #78a7ff;
        color: #fff;
        margin: 10px;
        border: 1px solid #78a7ff;
        font-size: 15px;
    }

    .back:hover {
        background-color: #6391f1;
    }

    .appcode {
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        padding: 20px 0 10px 0;
    }

    .appcode .left, .appcode .codeImg {
        float: left;
        margin-left: 40px;
    }

    .appcode .left p {
        cursor: pointer;
        background-color: #ebebeb;
        border-radius: 30px;
        padding: 5px 10px;
        font-size: 15px;
        margin-top: 10px;
    }

    .appcode .left p:nth-child(2) {
        margin-top: 25px;
    }

    .appcode .left p:hover {
        background-color: #d5dbdb;
    }

    .appcode .codeImg {
        margin-left: 70px;
    }

    .appcode .codeImg img {
        max-width: 110px;
    }

    .appcode .codeImg .saoma {
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        margin: 0;
    }

    .dowloadcenter {
        font-size: 15px;
        padding: 10px 10px 0 10px;
    }

    .closeBtn {
        float: right;
        cursor: pointer;
    }

    .code {
        width: 400px;
        border: 1px solid #d5dbdb;
        z-index: 99;
        position: absolute;
        left: 22%;
        top: 10%;
        background-color: #fff;
    }

    .marginR {
        margin-right: 5px;
        cursor: pointer;
    }

    .bluecolor {
        color: #6391f1;
        font-size: 14px;
    }

    .bluecolor:hover {
        color: #fc7009;
    }

    .handleBox {
        width: 280px;
    }

    .warn {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color: red;
        text-align: right;
        margin: 0;
    }

    html {
        overflow: hidden;
    }

    .center_logo {
        position: absolute;
        background-image: url(src/app/sys/login/images/center_logo.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        width: 76px;
        height: 76px;
        top: 93px;
        left: 133px;
    }

    .login_button {
        background-color: #6391f1;
        color: #FFF;
        font-size: 20px;
        height: 40px;
        width: 280px;
        border-radius: 4px;
        border: none;
        border: 1px solid #6391f1;
    }

    .password {
        width: 280px;
        height: 38px;
        padding: 5px 5px 5px 50px;
        font-size: 16px;
        background: #FFF;
        border-radius: 5px;
    }

    .verifi_code {
        width: 173px;
        height: 38px;
        font-size: 16px;
        padding: 5px ;
        background: #FFF;
        border-radius: 5px;
    }

    .icon-pw {
        position: absolute;
        z-index: 5;
        background-image: url(src/app/sys/login/images/icon_mima.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        width: 41px;
        height: 23px;
        top: 8px;
        left: 9px;
    }

    .user {
        position: absolute;
        left: 0;
        z-index: 5;
        background-image: url(src/app/sys/login/images/icon_user.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        width: 41px;
        height: 23px;
        top: 8px;
        left: 9px
    }

    .div-bor {
        position: relative;
        width: 280px;
    }

    .div-bor input {
        border: 1px solid #C0C0C0;
    }

    .login_form {
        position: absolute;
        left: 450px;
        top: 65px;
        width: 300px;
        height: 150px;
    }

    .bg_frame {
        background-image: url("src/app/sys/login/images/bg_kuang.png");
        background-repeat: no-repeat;
        width: 800px;
        height: 338px;
        box-shadow: 10px 10px 100px #2759C8;
        margin: 160px auto;
        position: relative;
        border-radius: 5px 5px 5px 5px
    }

    .logo {
        background-image: url("src/app/sys/login/images/logo.png");
        background-repeat: no-repeat;
        width: 250px;
        height: 50px;
        position: absolute;
        left: -235px;
        top: -99px;
    }

    h1 {
        color: #FFFFFF;
        font-size: 22px;
        position: absolute;
        left: 63px;
        top: 161px;
    }

    .line1 {
        background-image: url("src/app/sys/login/images/img_xian1.png");
        background-repeat: no-repeat;
        position: absolute;
        width: 211px;
        height: 20px;
        left: 90px;
        top: 219px;
    }

    h2 {
        color: #6490f2;
        font-size: 26px;
        position: absolute;
        left: 532px;
        margin-top: 24px;
    }


</style>
